window.onload = function () {
    searchEffect();
    timeBack ();
    bannerEffect();
};
// 搜索区域
function searchEffect() {
    var banner = document.querySelector(".jd_banner");
    var bannerHeight = banner.offsetHeight;
    var search = document.querySelector(".jd_search");
    window.onscroll = function () {
        var offsetTop = document.documentElement.scrollTop || document.body.scrollTop;
        var opacity = 0;   
        if(offsetTop < bannerHeight){
            opacity = offsetTop/bannerHeight;
            search.style.backgroundColor = "rgba(233,35,34,"+opacity+")";
        }
    }
}
// 倒计时区域
function timeBack(){
    var spans = document.querySelector(".jd_sk_time").querySelectorAll("span");
    var totalTime=3700; //1*60*60   3700%3600=100 /60
    /*3.开启定时器*/
    var timer = setInterval(function () {
        totalTime--;
        /*判断倒计时时间是否已经完成*/
        if(totalTime < 0){
            /*清除时钟*/
            clearInterval(timer);
            return;
        }
        /*得到剩余时间中的  时  分  秒*/
        /*获取时*/
        var hour = Math.floor(totalTime/3600);
        /*获取分*/
        var minute = Math.floor(totalTime%3600/60);
        /*获取秒*/
        var second = Math.floor(totalTime%60);
        /*赋值，将时间填充到span中  12*/
        spans[0].innerHTML = Math.floor(hour/10);
        spans[1].innerHTML = Math.floor(hour%10);

        spans[3].innerHTML = Math.floor(minute/10);
        spans[4].innerHTML = Math.floor(minute%10);

        spans[6].innerHTML = Math.floor(second/10);
        spans[7].innerHTML = Math.floor(second%10);
    },1000);
}
// 轮播图区域
/*
    手动轮播
    自动轮播
     思路：
        1. 在首部添加最后一张图片，在尾部添加第一张图片
        2. 修改页面结构
        3. 修改对应样式
        4. 设置默认偏移：默认显示索引为为1的图片
            4.1 transfrom: translateX(-10%):参照自身
            4.2 position: relative; left: -100%;参照父容器
*/
function bannerEffect() {
    var oBanner = document.querySelector('.jd_banner');
    var imgBox = oBanner.querySelector('ul:first-of-type');
    var firstImg = imgBox.querySelector('li:first-of-type');
    var lastImg = imgBox.querySelector('li:last-of-type');
    // cloneNode 赋值dom元素
    imgBox.appendChild(firstImg.cloneNode(true));
    imgBox.insertBefore(lastImg.cloneNode(true), imgBox.firstChild);
    var aLi = imgBox.querySelectorAll('li');
    var liCount = aLi.length;
    var bannerWidth = oBanner.offsetWidth;
    imgBox.style.width = liCount * bannerWidth + 'px';
    // 设置每个li的宽度
    for (var i=0;i<liCount;i++) {
        aLi[i].style.width = oBanner.offsetWidth + 'px';
    }
    // 设置图片索引值，默认为1 ，因为偏移了一张
    var index = 1;
    // 设置默认的偏移
    imgBox.style.left = -bannerWidth + 'px';
    // 当屏幕变化是重新计算盒子的宽度
    window.onresize = function () {
        bannerWidth = oBanner.offsetWidth; // banner宽度要覆盖原来的宽度
        imgBox.style.width = liCount * bannerWidth + 'px';
        for(var i=0;i<liCount;i++) {
            aLi[i].style.width = oBanner.offsetWidth + 'px';
        }
        // 重新设置定位置
        imgBox.style.left =  -index * bannerWidth + 'px';
    } 
    // 实现点标记
    var setIndicator = function (index) {
        var indicators = oBanner.querySelector('ul:last-of-type').querySelectorAll('li');
        // 先清除其他li元素的active样式
        for (var i=0;i<indicators.length;i++) {
            indicators[i].classList.remove('active');
        }
        // 为当前li元素添加active样式
        indicators[index - 1].classList.add('active');
    }
    // 自动轮播
    var timerId;
    var startTime = function () {
        timerId = setInterval(function () {
            index ++;
            // 设置过渡效果
            imgBox.style.transition = 'left .5s ease-in-out';
            // 设置偏移
            imgBox.style.left = (-index * bannerWidth) + 'px';
            setTimeout(function () {
                if (index == liCount - 1) {
                    index = 1;
                    imgBox.style.transition = 'none';
                    // 指定偏移的位置
                    imgBox.style.left = (-index * bannerWidth) + 'px';
                }
            },500);
        },1000);  
    }
    startTime();
    // 实现手动轮播
    /*
        记录手指的起始位置
        记录手指在滑动过程中的位置，计算相对于起始位置的偏移值，通过left样式实现图片的偏移  
        在松开手指后，判断当前滑动的距离，如果超出指定的范围，就翻页，否则回弹；
        touch事件的触发，必须保证元素的具体宽高，如果宽或高为0，则不会触发；
    */
        var startX,moveX,distanceX;
        var isEnd = true;
        // 手指滑动开始
        imgBox.addEventListener('touchstart', function (e) {
            clearInterval(timerId);
            startX = e.targetTouches[0].clientX;
        });
        // 手指触摸过程
        imgBox.addEventListener('touchmove', function (e) {
            if(isEnd) {
                moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            imgBox.style.transition = 'none';
            // 本次滑动操作应该基于轮播图已经偏移的距离
            imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
            } 
        });
        // 手指触摸结束
        imgBox.addEventListener('touchend', function (e) {
            isEnd = false;
            // 判断当前滑动距离是否超出100
            if (Math.abs(distanceX) > 100) {
                if (distanceX > 0) { // 上一张
                    index--;
                }else {  // 下一张
                    index++;
                }
                // 翻页
                imgBox.style.transition = 'left .5s ease-in-out';
                imgBox.style.left = -index*bannerWidth + 'px';
            }
            else if (Math.abs(distanceX) > 0) { // 确保用户进行过滑动操作
                // 回弹
                imgBox.style.transition = 'left .5 ease-in-out';
                imgBox.style.left = -index * bannerWidth + 'px';
            }
            // 将上一次move所长生的数量重置为0
            startX = 0;
            moveX = 0;
            distanceX = 0;
        });
        // webkitTransitionEnd 事件可以监听元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕执行该事件
        imgBox.addEventListener('webkitTransitionEnd', function () {
            // 如果到了最后一张liCount -1, 则回到 index = 1;
            // 如果到了第一张index = 0， 则回到index liCount-2;
            if (index == liCount -1) {
                index = 1;
                // 消除过渡
                imgBox.style.transition = 'none';
                // 设置偏移
                imgBox.style.left = -index * bannerWidth + 'px';
            }else if (index == 0) {
                index = liCount -2;
                imgBox.style.transition = 'none';
                imgBox.style.left = -index * bannerWidth + 'px';
            }
            // 设置标记
            setIndicator(index);
            setTimeout(function () {
                isEnd = true;
                clearInterval(timerId);
                // 重新开启定时器
                startTime();
            },100);
        });
    }

